<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  <meta name="generator" content="Hugo 0.88.1">
  <title>巡游轨迹的个人博客</title>
  <link href="../dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
  </style>
  <link href="../dist/css/navbar.css" rel="stylesheet">
  <link href="../dist/css/carousel.css" rel="stylesheet">
  <script src="../dist/js/jquery.min.js"></script>
  <link href="../dist/css/footers.css" rel="stylesheet">
</head>

<body>
  <main>
    <div>
      <!-------------------导航栏------------------->
      <nav class="navbar navbar-expand-lg navbar-light bg-light rounded fixed-top" aria-label="Eleventh navbar example">
        <div class="container-fluid">
          <img src="../images/TouXiang.jpg" alt="" width="35" height="35" class="rounded-circle me-2">
          <a class="navbar-brand" href="start.html" style="color:rgba(0, 163, 228, 0.87) ;">巡游轨迹的个人博客</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample09"
            aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarsExample09">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="download.html">旅行攻略</a>
              </li>
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="personal.html">个人简介</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-bs-toggle="dropdown"
                  aria-expanded="false">更多</a>
                <ul class="dropdown-menu" aria-labelledby="dropdown09">
                  <li><a class="dropdown-item" href="message.html">留言</a></li>
                  <li><a class="dropdown-item" href="Updatelog.html">图片上传</a></li>
                </ul>
              </li>
            </ul>
            <form>
              <input id="textId" class="form-control" type="text" placeholder="请输入..." aria-label="Search">
            </form>
            <div class="text-end">
              &nbsp;&nbsp;<button id="btn" type="button" class="btn btn-warning">搜索</button>
              &nbsp;&nbsp;&nbsp;&nbsp;
            </div>
          </div>
        </div>
      </nav>
    </div>
  </main>

  <main>
    <div id="mask">
      <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">

        <!--轮播标签-->
        <div class="carousel-indicators">
          <template :key="i" v-for="(item, i) in carousel">
            <button type="button" data-bs-target="#myCarousel" :data-bs-slide-to="i"
              :class="item.indicators.active === true? `active`: ` `" :aria-current="item.indicators.current"
              aria-label="item.indicators.label"></button>
          </template>
        </div>

        <!--轮播图片-->
        <div class="carousel-inner">
          <template :key="i" v-for="(item, i) in carousel">
            <div :class="item.inner.active === true? `carousel-item active`: `carousel-item`" style="height: 650px;">
              <img :src="item.inner.url" alt="" style="height: 650px;" />
              <div class="container">
                <div class="carousel-caption text-start">
                  <h1>{{item.inner.name}}</h1>
                  <p>{{item.inner.brief}}</p>
                  <p>
                    <template v-for="(btn, i) in item.inner.btn">
                      <a class="btn btn-lg btn-primary" :href="btn.url" :download="btn.download" :target="btn.target"
                        @click="shuchu">{{btn.name}}</a>&nbsp;&nbsp;
                    </template>
                  </p>
                </div>
              </div>
            </div>
          </template>
        </div>

        <!--轮播图片切换按钮-->
        <div>
          <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>
    </div>
  </main>

  <div id="abcd">
    <div class="album py-5 bg-light">
      <div class="container">

        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
          <template :key="i" v-for="(item, i) in carousel2">
            <div class="col">
              <div class="card shadow-sm">
                <img :src="item.inner.url" alt="" style="width:100%; height:225;" />
                <div class="card-body">
                  <p class="card-text">{{item.inner.brief}}</p>
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group">
                      <template v-for="(btn, i) in item.inner.btn">
                        <button type="button" class="btn btn-sm btn-outline-secondary">
                          <a :href="btn.url" :download="btn.download" :target="btn.target"
                            style="color:black; text-decoration:none">{{btn.name}}</a>
                        </button>
                      </template>
                    </div>
                    <small class="text-muted">{{item.inner.time}}</small>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>


  <!--------页脚块-------->
  <div>
    <div class="b-example-divider" style="height: 30px;"></div>
    <!-------------------分割------------------->
    <div class="container" style="height: 30px;">
      <!-------------------页脚------------------->
      <div id="lxfs">
        <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
          <div class="col-md-4 d-flex align-items-center">
            <a href="personal.html" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
              <img src="../images/jianjie.jpg" width="24" height="24">
            </a>
            <span class="text-muted">&copy; 2022 Company, Inc</span>
          </div>
          <!-------------------弹框样式1------------------->.
          <div background-color="grey">
            <div class="back" v-if="showModal" @click="showModal=false"></div>
            <div class="pop" v-if="showModal"
              style="background:url('../images/footer/wxt.jpg')  no-repeat;background-size: cover;">
            </div>
          </div>
          <!-------------------弹框样式2------------------->.
          <div background-color="grey1">
            <div class="back" v-if="showModalqq" @click="showModalqq=false"></div>
            <div class="pop" v-if="showModalqq"
              style="background:url('../images/footer/qqt.jpg')  no-repeat;background-size: cover;">
            </div>
          </div>
          <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
            <li class="ms-3"><a class="text-muted" href="javascript:void(0)" v-bind="showModal" @click="wx1(index)"><img
                  src="../images/footer/weixin.png" width="24" height="24"></a></li>
            <li class="ms-3"><a class="text-muted" href="javascript:void(0)" v-bind="showModalqq"
                @click="qq1(index)"><img src="../images/footer/qq.png" width="24" height="24"></a>
            </li>
            <li class="ms-3"><a class="text-muted" href="#"><img src="../images/footer/top.png" width="24"
                  height="24"></a></li>
          </ul>
        </footer>
      </div>
    </div>
  </div>
  <script src="../dist/js/bootstrap.bundle.min.js"></script>
  <script src="../dist/js/vue3.js"></script>
  <script>
    Vue.createApp({
      data() {
        return {

          carousel: [
            // 第一张图
            {
              // 轮播图
              'inner': {
                'name': '涠洲岛-北海市', // 大标题
                'brief': '这里是国内最蓝的海岛，也是唯一有可能看到鲸鱼的地方，尤其是这个季节，鲸鱼会频繁出现，给人带来无限的期待.',	// 描述
                'url': '../images/lunbo/0.jpg', 		// 图片， url改成 "../images/0.jpg"为本地图片，改成url是外部链接
                'btn': [	// 按钮
                  { 'name': '查看大图', 'url': '../images/lunbo/0.jpg', 'target': '_blank' },
                  { 'name': '下载原图', 'url': '../images/lunbo/0.jpg', 'download': '0.jpg' }
                ],
                'active': true,		// 当前页标识
              },
              // 轮播游标
              'indicators': {
                'active': true,		// 
                'current': true,	// 游标当前标识
                'label': 'Slide 1',
              }

            },
            // 第二张图
            {
              // 轮播图
              'inner': {
                'name': '纳木错-西藏',
                'brief': '纳木错，蒙古语称“腾格里诺尔”（或“腾格里海”）；藏语全称为“纳木措普摩”，意为富裕天湖（或天湖、灵湖或神湖）；两种名称都是“天湖”之意。历史文献上记载，此湖像蓝天降到地面，故称“天湖”.',
                'url': '../images/lunbo/1.jpg',
                'btn': [
                  { 'name': '查看大图', 'url': '../images/lunbo/1.jpg', 'target': '_blank' },
                  { 'name': '下载原图', 'url': '../images/lunbo/1.jpg', 'download': '1.jpg' }
                ],
                'active': false,
              },
              // 轮播游标
              'indicators': {
                'active': false,
                'current': false,
                'label': 'Slide 1',
              }
            },

            // 第三张图
            {
              // 轮播图
              'inner': {
                'name': '半屏山-温州',
                'brief': '半屏山，也称半屏岛、半面山，位于温州瓯江口外的洞头区，是洞头主要旅游景点之一，被誉为“神州海上第一屏”。.',
                'url': '../images/lunbo/2.jpg',
                'btn': [
                  { 'name': '查看大图', 'url': '../images/lunbo/2.jpg', 'target': '_blank' },
                  { 'name': '下载原图', 'url': '../images/lunbo/2.jpg', 'download': '2.jpg' }
                ],
                'active': false,
              },
              // 轮播游标
              'indicators': {
                'active': false,
                'current': false,
                'label': 'Slide 1',
              }
            },

            // 第四张图
            {
              // 轮播图
              'inner': {
                'name': '天门山-张家界',
                'brief': '天门山（Tianmen Mountain），古称嵩梁山，位于湖南省张家界市永定区大庸中路11号，旅游区总面积96平方千米，山顶面积达2平方千米。天门山寺自唐朝以来香火鼎盛，寺外七级浮屠，古雅幽清，寺内安奉有珍贵释迦牟尼佛舍利，是张家界的文化圣地，被尊为“张家界之魂”、“湘西第一神山”。.',
                'url': '../images/lunbo/3.jpg',
                'btn': [
                  { 'name': '查看大图', 'url': '../images/lunbo/3.jpg', 'target': '_blank' },
                  { 'name': '下载原图', 'url': '../images/lunbo/3.jpg', 'download': '3.jpg' }
                ],
                'active': false,
              },
              // 轮播游标
              'indicators': {
                'active': false,
                'current': false,
                'label': 'Slide 1',
              }
            },
          ]
        }
      },
      methods: {
        shuchu() {
          console.log(this.carousel);
          console.log(this.carousel2);
        }

      },
    }).mount('#mask')

    //图片列表
    Vue.createApp({
      data() {
        return {

          carousel2: [
            // 第一张图
            {
              'inner': {
                'brief': '这里是国内最蓝的海岛，也是唯一有可能看到鲸鱼的地方，尤其是这个季节，鲸鱼会频繁出现，给人带来无限的期待.',	// 描述
                'url': '../images/list/0.jpg', 		// 图片， url改成 "../images/0.jpg"为本地图片，改成url是外部链接
                'btn': [	// 按钮
                  { 'name': '查看', 'url': '../images/list/0.jpg', 'target': '_blank' }, { 'name': '下载', 'url': '../images/list/0.jpg', 'download': '0.jpg' }
                ],
                'time': '2022/4/18'
              }
            },

            {
              'inner': {
                'brief': '千岛湖镇，是浙江省杭州市淳安县政府所在地，是全县政治、经济、文化、交通、信息中心，也是5A级国家风景名胜区千岛湖的所在地.',	// 描述
                'url': '../images/list/1.jpg', 		// 图片， url改成 "../images/0.jpg"为本地图片，改成url是外部链接
                'btn': [	// 按钮
                  { 'name': '查看', 'url': '../images/list/1.jpg', 'target': '_blank' }, { 'name': '下载', 'url': '../images/list/1.jpg', 'download': '1.jpg' }
                ],
                'time': '2022/4/8'
              }
            },

            {
              'inner': {
                'brief': '长江干流自西而东横贯中国中部，延伸至贵州、甘肃、陕西、河南、广西、广东、浙江、福建8个省、自治区的部分地区.',	// 描述
                'url': '../images/list/2.jpg', 		// 图片， url改成 "../images/0.jpg"为本地图片，改成url是外部链接
                'btn': [	// 按钮
                  { 'name': '查看', 'url': '../images/list/2.jpg', 'target': '_blank' }, { 'name': '下载', 'url': '../images/list/2.jpg', 'download': '2.jpg' }
                ],
                'time': '2022/3/25'
              }
            },

            {
              'inner': {
                'brief': '月牙泉，古称沙井，俗名药泉，自汉朝起即为“敦煌八景”之一，处于鸣沙山环抱之中，其形酷似一弯新月而得名，得名“月泉晓澈”.',	// 描述
                'url': '../images/list/3.jpg', 		// 图片， url改成 "../images/0.jpg"为本地图片，改成url是外部链接
                'btn': [	// 按钮
                  { 'name': '查看', 'url': '../images/list/3.jpg', 'target': '_blank' }, { 'name': '下载', 'url': '../images/list/3.jpg', 'download': '3.jpg' }
                ],
                'time': '2022/3/15'
              }
            },

            {
              'inner': {
                'brief': '阳朔县，隶属于桂林市，位于广西东北部，桂林市区南面，东邻恭城县、平乐县，南邻荔浦市，西接永福县、临桂区，北与灵川县、雁山区接壤.',	// 描述
                'url': '../images/list/4.jpg', 		// 图片， url改成 "../images/0.jpg"为本地图片，改成url是外部链接
                'btn': [	// 按钮
                  { 'name': '查看', 'url': '../images/list/4.jpg', 'target': '_blank' }, { 'name': '下载', 'url': '../images/list/4.jpg', 'download': '4.jpg' }
                ],
                'time': '2022/3/6'
              }
            },

            {
              'inner': {
                'brief': '中山，古称香山，是孙中山先生的故乡，是全国4个不设区的地级市之一，珠三角中心城市之一、粤港澳大湾区重要节点城市、广东地区性中心城市之一.',	// 描述
                'url': '../images/list/5.jpg', 		// 图片， url改成 "../images/0.jpg"为本地图片，改成url是外部链接
                'btn': [	// 按钮
                  { 'name': '查看', 'url': '../images/list/5.jpg', 'target': '_blank' }, { 'name': '下载', 'url': '../images/list/5.jpg', 'download': '5.jpg' }
                ],
                'time': '2022/2/6'
              }
            },

            {
              'inner': {
                'brief': '喜马拉雅山脉 （梵语：hima alaya，意为雪域），藏语意为“雪的故乡”。位于青藏高原南巅边缘，是世界海拔最高的山脉，全长2450千米，宽200～350千米.',	// 描述
                'url': '../images/list/6.jpg', 		// 图片， url改成 "../images/0.jpg"为本地图片，改成url是外部链接
                'btn': [	// 按钮
                  { 'name': '查看', 'url': '../images/list/6.jpg', 'target': '_blank' }, { 'name': '下载', 'url': '../images/list/6.jpg', 'download': '6.jpg' }
                ],
                'time': '2022/1/10'
              }
            },

            {
              'inner': {
                'brief': '吐鲁番，新疆维吾尔自治区辖地级市，位于自治区中部，是天山东部的一个东西横置的形如橄榄状的山间盆地，四面环山，属于典型的大陆性暖温带荒漠气候.',	// 描述
                'url': '../images/list/7.jpg', 		// 图片， url改成 "../images/0.jpg"为本地图片，改成url是外部链接
                'btn': [	// 按钮
                  { 'name': '查看', 'url': '../images/list/7.jpg', 'target': '_blank' }, { 'name': '下载', 'url': '../images/list/7.jpg', 'download': '7.jpg' }
                ],
                'time': '2021/12/28'
              }
            },

            {
              'inner': {
                'brief': '清迈：环境优美、历史悠久、气候宜人等等都是这个城市在好不过的代名词了，在经济的发展上最突出一个领域就是纺织，承担起了泰国制造业领域的重任.',	// 描述
                'url': '../images/list/8.jpg', 		// 图片， url改成 "../images/0.jpg"为本地图片，改成url是外部链接
                'btn': [	// 按钮
                  { 'name': '查看', 'url': '../images/list/8.jpg', 'target': '_blank' }, { 'name': '下载', 'url': '../images/list/8.jpg', 'download': '../images/8.jpg' }
                ],
                'time': '2022/11/22'
              }
            }

          ]
        }
      },
      methods: {

      },
    }).mount('#abcd')
    Vue.createApp({
      data() {
        return {
          showModal: false,
          showModalqq: false,
        }
      },
      methods: {
        //页脚qq弹框判断
        qq1(index) {
          this.showModalqq = true;
          this.showModal = false;
        },
        //页脚微信弹框判断
        wx1(index) {
          this.showModal = true;
          this.showModalqq = false;
        },
      }
    }).mount('#lxfs')
  </script>
  <script type="text/javascript">
    //右上角百度搜索
    var $eleBtn1 = $("#btn");
    $eleBtn1.click(function () {
      var value = document.getElementById("textId").value;
      console.log(value)
      var $eleForm = $("<form method='get' </form>");
      window.open("https://www.baidu.com/s?wd=" + value);
      $(document.body).append($eleForm);
      $eleForm.submit();
    })
  </script>
</body>

</html>